/* 通用 */

* {
    margin: 0;
    padding: 0;
}


/* 音乐 */

.music {
    position: fixed;
    z-index: 5;
    top: 3vw;
    right: 3vh;
    width: 15vw;
    height: 15vw;
    border: 3px solid red;
    background-color: white;
    border-radius: 50%;
}

#music_twoimg {
    position: absolute;
    width: 25%;
    top: 20%;
    right: 2%;
    margin: 0 auto;
}

#music_oneimg {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 85%;
    margin: auto;
    animation: music_disc 4s linear infinite;
}

@keyframes music_disc {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* 页面一 */


/* 背景 */

.page_one {
    background: url('./imgs/p1_bg.jpg');
    /* 背景不重复出现 */
    background-repeat: no-repeat;
    /* 宽 高 */
    background-size: 100% 100%;
    height: 100vh;
    display: block;
}


/* 灯笼 */

.p1_1 {
    z-index: 0;
    /* 图片样式 */
    background: url("imgs/p1_lantern.png") no-repeat;
    background-size: 100%;
    width: 45vw;
    height: 71.2vh;
    top: -8%;
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
    /* z-index: 0; */
    /* 字体样式 */
    font-size: 1.5rem;
    padding-top: 27vh;
    text-align: center;
    color: wheat;
    /* 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 */
    box-sizing: border-box;
    animation: p1_lantern 0.3s infinite alternate;
}


/* 灯笼里的闪光 */

.p1_1:before {
    position: absolute;
    z-index: -1;
    top: -6vh;
    right: 0;
    bottom: 0;
    left: 0;
    width: 30vw;
    height: 30vw;
    margin: auto;
    content: '';
    opacity: .7;
    border-radius: 50%;
    background: #d60b3b;
    box-shadow: 0 0 10vw 10vw #d60b3b;
    animation: p1_lantern_flash .5s infinite alternate;
}

@keyframes p1_lantern_flash {
    0% {
        opacity: .8;
        transform: scale(.8, .8);
    }
    100% {
        opacity: 1;
    }
}


/* 小慕 */

#p1_2 {
    width: 40vw;
    height: 40vw;
    margin-top: 70vh;
    margin-left: 25%;
}


/* 第二页面 */

.page_two {
    background: url("imgs/p2_bg.jpg") no-repeat;
    width: 100vw;
    height: 100vh;
    display: none;
}

.p2_1 {
    position: absolute;
    background: url("imgs/p2_circle_inner.png") no-repeat;
    background-size: 100%;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 70vw auto;
    width: 40%;
    height: 23%;
    animation: p2_1_1 1s linear 1s infinite;
}

@keyframes p2_1_1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

.p2_2 {
    position: absolute;
    background: url("imgs/p2_circle_middle.png") no-repeat;
    background-size: 100%;
    right: 0;
    left: 0;
    margin: 65vw auto;
    width: 50%;
    height: 28%;
    animation: p2_2_1 2s linear 2s infinite;
}

@keyframes p2_2_1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(720deg);
    }
}

.p2_3 {
    position: absolute;
    background: url("imgs/p2_circle_outer.png") no-repeat;
    background-size: 100%;
    right: 0;
    left: 0;
    margin: 55vw auto;
    width: 70%;
    height: 40%;
    animation: p2_3_1 3s linear 3s infinite;
}

@keyframes p2_3_1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-1080deg);
    }
}

#year {
    margin: 83vw auto;
    margin-left: 33%;
    width: 35%;
}


/* 第三页 */

.page_three {
    background: url("imgs/p3_bg.jpg") no-repeat;
    width: 100vw;
    height: 100vh;
    display: none;
}

#couplet_left {
    position: absolute;
    top: 30vh;
    left: 5vw;
    width: 22vw;
    height: 40vh;
    background: url("imgs/p3_couplet_left.png") no-repeat center center;
    background-size: 100%;
}

#couplet_right {
    position: absolute;
    top: 30vh;
    left: 70vw;
    width: 22vw;
    height: 40vh;
    background: url("imgs/p3_couplet_right.png") no-repeat;
    background-size: 100%;
}

#title {
    position: absolute;
    top: 21vh;
    right: 0;
    left: 0;
    width: 48.125vw;
    height: 50vh;
    margin: auto;
    background: url('./imgs/p3_title.png') no-repeat;
    background-size: 100%;
}

#bless {
    position: absolute;
    top: 75vh;
    right: 0;
    left: 0;
    width: 35vw;
    height: 35vw;
    margin: auto;
    background: url('./imgs/p3_bless.png') no-repeat;
    background-size: 100%;
    animation: p2_3_1 3s linear 1s infinite;
}

@keyframes p2_3_1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-720deg);
    }
}